<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/nanshi.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="web">
			
			
			<!-- 头部 -->
			<header>
				<div class="top">
					<div class="img">
						<a href=""><img src="首页图片/手表index04_03.jpg"></a>
						<a href=""><img src="./首页图片/手表index03_03.jpg"></a>
						<a href=""><img src="首页图片/手表index00_03.jpg"></a>
					</div>
					<p>伊森官方旗舰网站欢迎您的光临</p>
				</div>
			
			
				<nav>
					<div class="container con">
						<!-- Collect the nav links, forms, and other content for toggling -->
			
			
						<ul class=" middle ">
							<img src="./首页图片/手表index01_03.jpg" alt="" class="logo">
							<li><a href="index.html">首页 </a></li>
							<li><a href="#">关于伊森</a></li>
							<li style="background-color: #008c8c;" class="active "><a href="changpin.html">产品系列</a></li>
							<li><a href="#">售后服务</a></li>
							<li><a href="#">联系伊森</a></li>
						</ul>
			
			
			
					</div>
				</nav>
			
				<div class="end">
					<ul class="ul">
						<li><img src="./首页图片/手表index_001.jpg" alt=""></li>
						<li><img src="./首页图片/手表index_002.jpg" alt=""></li>
						<li><img src="./首页图片/手表index_003.jpg" alt=""></li>
						
						
					</ul>
					
					
					<div class="arrow left_arrow"> &lt;</div>
					<div class="arrow right_arrow"> &gt;</div>
					
					
					<ol>
						
					</ol>
			
			
				</div>
			
			
			</header>
			
			
			
			
			
			
			<!-- 中部 -->
			<div class="section">
				<div class="positi">
					<div class="zi">
						您的位置
					</div>
					<div class="two">
						首页	>产品系列>男士腕表系列>ZS-1000W时尚>风靡007
						
					</div>
					
				</div>
				
				
				
				<div class="second">
					<div class="h1">
						<img src="首页图片/手表详细2_03.jpg" >
					</div>
					<div class="h1_right">
						<h2>Eason</h2>
						<h3>男士腕表系列风靡007 35毫米腕表</h3>
						<h4>精致枫木外壳搭配黄金调准轴</h4>
						<h5>3800 CNY*</h5>
						<p>*建议零售价（含增值税）</p>
						<a href="">隐藏价格</a>
						<div class="write">
							
						</div>
					</div>
					
					
				</div>
				
				<div class="three">
					<div class="left">
						<h2>细节描述</h2>
						<p>伊森ZS1000W时尚以著名的“托爪”（Griffes）及瞩目的表<br/>盘，展现隽永恒久的迷人设计概念。</p>
						<p>这个腕表配备香槟色表盘，3时位置设有日历窗口，并覆有耐磨<br/>损蓝宝石表镜。35毫米精钢表壳配备镌刻罗马数字的18K黄金表<br/>圈，搭配18K黄金钢表链。</p>
						<p>这款时计搭载有精准石英机芯－－欧米茄1532机芯。</p>
					</div>
					<div class="right">
						<h2>特色</h2>
						<div class="on"></div>
						<h3>日期显示</h3>
						<h4>使用期满</h4>
						<h2>技术数据</h2>
						<div class="on"></div>
						<p>水晶镜面</p>
						<div class="os">
							圆弧形双面防反光耐磨损蓝宝石水晶
						</div>
						<div class="one">
							<div class="xi">
								<div class="xis">
									表壳
								</div>
								<div class="xix">
									精钢表壳
								</div>
							</div>
							<div class="zi">
								<div class="xis">
									尺寸
								</div>
								<div class="xix">
									表壳直径：35毫米
								</div>
							</div>
						</div>
						
					</div>
					
				</div>
				
				
				<div class="craft">
					工艺制作
				</div>
				
				<div class="pho">
					<img src="./首页图片/手表index22_03.jpg" >
					<img src="首页图片/手表详细4_03.jpg" >
					<img src="首页图片/手表详细5_03.jpg" >
					<div class="chunk">
						<p>V同轴擒纵系统<br/>]Si14硅材质游丝</p>						
					</div>
					<img src="首页图片/手表详细7_03.jpg" >
					<div class="chunk">
						
						<p>o蓝宝石表镜 <br/> t表镜内外双面防反光处理 <br/> D蓝宝石表背</p>
						
					</div>
				</div>
				
				
				<div class="detall">
					产品细节
				</div>
				
				<div class="tu">
					<img src="./首页图片/手表详细9_03.jpg" >
				</div>
				
				<div class="zn">
					尊霸腕表秉承伊森制表理念，内部搭载品牌最先进的机械机芯，设计灵感源自彰显高级制表技艺、
					精准可靠的星座系列早期表款。每一枚腕表均经过一系列独立测试认证，其革命性的测试程序为腕表行业树立了全新的品质标准
				</div>
				
				
				<div class="en">
					<div class="ens">
						<h3>极具个性的表圈</h3>
						<p>
环绕在表盘的凹槽表圈具有光滑的顶部凸缘，赋予尊霸腕表独一无二的外观造型，即便历经世代流传也极易辨识。精钢表款配备的凹槽表圈则采用硬质合金（碳化钨）制成。</p>
					</div>
					
					<div class="enn">
						<img src="首页图片/手表详细10_03.jpg" >
					</div>
				</div>
				
				
				
				<div class="else">
					其他系列
				</div>
				
				<div class="finally">
					<div class="ones">
						<img src="首页图片/手表详细15_03.jpg" >
					</div>
					<div class="twos">
						<img src="首页图片/手表详细11_03.jpg" >
						<img src="首页图片/手表详细12_03.jpg" >
						<img src="首页图片/手表详细13_03.jpg" >
						<img src="首页图片/手表详细14_03.jpg" >
					</div>
					<div class="ss">
						<img src="首页图片/手表详细16_03.jpg" >
					</div>
				</div>
				
				
				
				<div class="wirst">
					
				</div>
				
				
				<div class="hh">
					伊森“同轴•至臻天文台表”39毫米
				</div>
				
				
				
				
				
				
			</div>
			
			<!-- 尾部 -->
			
			<div class="footer">
				<div class="sale">
					<div class="hos">
						<h3>伊森腕表品牌</h3>
						<p></p>
						<ul>
							<li><a href="">品牌简介</a></li>
							<li><a href="">总裁致辞</a></li>
							<li><a href="">员工关怀</a></li>
							<li><a href="">招商加盟</a></li>
							<li><a href="">人才招聘</a></li>
						</ul>
					</div>
					
					<div class="hos">
						<h3>伊森售后服务</h3>
						<p></p>
						<ul>
							<li><a href="">售后检测点</a></li>
							<li><a href="">送修流程</a></li>
							<li><a href="">维修报价</a></li>
							<li><a href="">保修政策</a></li>
							<li><a href="">联系客服</a></li>
						</ul>
					</div>
					
					<div class="hos">
						<h3>关于伊森</h3>
						<p></p>
						<ul>
							<li><a href="">媒体关注</a></li>
							<li><a href="">合作伙伴</a></li>
							<li> <a href="">销售区域</a></li>
							<li><a href="">荣誉资质</a></li>
							<li><a href="">伊森手表学堂</a></li>
						</ul>
					</div>
					
					
					
					
					
					
				</div>
				
				<div class="ss">
					<p>Copyright2016伊森腕表版权所有</p>
					<p>粤ICP备1234567号</p>
					<p>贵宾专线：400-200-9999</p>
					<p>地址：广州市海珠区XX大厦1808室</p>
					
				</div>
			</div>
			
			
			
			
			
			

			
			
			
		</div>
		
		
		
		
		
		
		<!-- <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		
		
		<script type="text/javascript">
			var ul = document.querySelector(".ul"),
				left_arrow = document.querySelector(".left_arrow"),
				right_arrow = document.querySelector(".right_arrow"),
				ol = document.querySelector("ol"),
				point_list = ol.getElementsByTagName("li"),
				carousel_box = document.querySelector(".end"),
				now_index = 0,
				timer,
				running = false;
			
			for (var i = 0; i < ul.childElementCount; i++) {
				ol.appendChild(document.createElement("li"));
			}
			ol.firstElementChild.classList.add("active");
			
			/**
			 * 右箭头点击
			 */
			right_arrow.addEventListener("click", function() {
				if (!running) {
					running = true;
					if (++now_index == point_list.length) {
						now_index = 0;
						right_end_run();
					} else {
						run();
					}
				}
			})
			
			/**
			 * 左箭头点击
			 */
			left_arrow.addEventListener("click", function() {
				if (--now_index == -1) {
					now_index = point_list.length - 1;
					left_end_run();
				} else {
					run();
				}
			})
			
			/**
			 * 运行主函数
			 */
			function run() {
				ul.style.transform = `translateX(-${now_index}00%)`;
			
				[...point_list].forEach(function(li_obj) {
					li_obj.classList.remove("active");
				})
			
				point_list[now_index].classList.add("active");
			}
			
			/**
			 * 右边尽头运行函数
			 */
			function right_end_run() {
				ul.appendChild(ul.firstElementChild.cloneNode(true));
				ul.style.transform = `translateX(-${point_list.length}00%)`;
				ul.addEventListener("transitionend", function() {
					ul.style.transition = "none";
					ul.style.transform = `translateX(0%)`;
					ul.lastElementChild.remove();
					getComputedStyle(ul).transition;
					ul.style.transition = "";
				}, {
					once: true
				})
			}
			
			/**
			 * 左边尽头事件
			 */
			function left_end_run() {
				ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
				ul.style.transition = "none";
				ul.style.transform = "translateX(-100%)";
				getComputedStyle(ul).transition;
				ul.style.transition = "";
				ul.style.transform = "translateX(0%)";
				ul.addEventListener("transitionend", function() {
					ul.style.transition = "none";
					ul.style.transform = `translateX(-${now_index}00%)`;
					ul.firstElementChild.remove();
					getComputedStyle(ul).transition;
					ul.style.transition = "";
				}, {
					once: true
				})
			}
			
			
			/**
			 * 自动轮播
			 */
			function auto_run() {
				timer = setInterval(function() {
					if (++now_index == point_list.length) {
						now_index = 0;
					}
					run();
				}, 2000)
			}
			auto_run();
			
			carousel_box.addEventListener("mouseenter", function() {
				clearInterval(timer);
			})
			
			carousel_box.addEventListener("mouseleave", function() {
				auto_run();
			})
			
			Array.prototype.slice.call(point_list).forEach(function(point_obj, index) {
				point_obj.addEventListener("click", function() {
					now_index = index;
					run();
				})
			})
			
			ul.addEventListener("transitionend", function() {
				running = false;
			})
			
			
			
		</script>
	</body>
</html>
